<template>
	<view class="wrap">
		<view class="wrapContentItem">
			<view class="wrapContentItemName">{{info.name}}</view>
			<view class="wrapContentItemContent">{{info.address}}</view>
			<view class="wrapContentItemBottom">
				<view class="wrapContentItemBottomRight">
					<text>联系电话:{{info.contact}}</text>
				</view>
			</view>
		</view>
		<view class="wrapContentList">
			<view class="wrapContentListTitle">选择场次</view>
			<view :class="choiceindex==index?'wrapContentListItem choice':'wrapContentListItem'" v-for="(item,index) in data" :key="index" @click="pushSessions(index)">
				<view class="wrapContentListItemName">{{item.agendaName}}</view>
				<view class="wrapContentListItemDate">{{item.agendaDate}} {{item.timeRange}}</view>
			</view>
		</view>
		<view class="bottomBtn" @click="appointment">立即预约</view>
	</view>
</template>

<script>
	import api from './config/api'
	import {sendReq} from '../../../components/canvasShow/config/mixin/sendReqMixin.js'
	export default{
		data(){
			return{
				id:'',//网点id
				data:[],//数据集合
				choiceindex:0,//已选择的场次下标
				info:{}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getagendaList()
			this.getgetBranch()
		},
		mounted() {
			
		},
		methods:{
			appointment(){
				var _this = this
				var apiUrl = api.agendAappointment+'?agendaId='+_this.data[_this.choiceindex].id
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					if (JSON.stringify(res.data) !== '{}') {
						if(res.code=='200'){
							uni.redirectTo({
								url:'/pages_category_page1/tabbar/measure/result?code=1'
							})
						}
					} else {
					}
					// console.log(JSON.parse(res.data.json))
				})
			},
			getgetBranch(){
				var _this = this
				var apiUrl = api.getBranch + '?branchId=' + this.id
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					if (JSON.stringify(res.data) !== '{}') {
						_this.info = res.data
					} else {
					}
				})
			},
			getagendaList() {
				var _this = this
				var apiUrl = api.agendaList + '?branchId=' + this.id
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					if (JSON.stringify(res.data) !== '{}') {
						if(res.code=='200'){
							_this.data = res.data
						}
					} else {
					}
				})
			},
			pushSessions(index){
				this.choiceindex = index
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	.wrap{
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
		margin: 0 auto;
		padding-top: 36upx;
		.wrapContentItem{
			width: 690upx;
			margin: 0 auto;
			background-color: #fff;
			padding: 24upx 38upx 24upx 24upx;
			border-radius: 16upx;
			.wrapContentItemName{
				color: #333;
				font-size: 32upx;
				margin-bottom: 16upx;
			}
			.wrapContentItemContent{
				color: #333;
				font-size: 27upx;
				margin-bottom: 16upx;
				line-height: 33upx;
			}
			.wrapContentItemBottom{
				display: flex;
				justify-content: space-between;
				.wrapContentItemBottomLeft{
					color: #999;
					font-size: 28upx;
				}
				.wrapContentItemBottomRight{
					display: flex;
					color: #333333;
					font-size: 28upx;
					text{
						margin-right: 8upx;
					}
				}
			}
		}
		.wrapContentList{
			width: 690upx;
			height: 73%;
			overflow: auto;
			margin:  0 auto;
			.wrapContentListTitle{
				font-size: 32upx;
				color: #000;
				font-weight: bold;
				margin-top: 36upx;
			}
			.choice{
				border-color: #EFB257 !important;
			}
			.wrapContentListItem{
				width: 100%;
				height: 136upx;
				border: 1px solid #DCDCDC;
				border-radius: 16upx;
				background-color: #fff;
				margin-top: 24upx;
				padding: 25upx;
				.wrapContentListItemName{
					color: #000;
					font-size: 28upx;
					font-weight: bold;
					margin-bottom: 8upx;
				}
				.wrapContentListItemDate{
					color: #000;
					font-size: 28upx;
					margin-bottom: 8upx;
				}
			}
		}
		.bottomBtn{
			width: 702upx;
			height: 88upx;
			background-color: #EFB257;
			text-align: center;
			line-height: 88upx;
			font-size: 28upx;
			color: #fff;
			position: fixed;
			bottom: 80upx;
			left: 24upx;
			border-radius: 100upx;
		}
	}
</style>